//基本语法
import React,{Component} from "react";
//参数引用包
import PropTypes from 'prop-types';

/*子组件获得父组件传递进来的值 用this.props.XXXX*/
export default class Item extends Component{

	//参数验证格式  数组arrayOf()多类型验证 oneOfType其中一个类型
	static propTypes = {
	 	context: PropTypes.string,
		handlerItemDelete: PropTypes.func,
		index: PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
		test: PropTypes.string.isRequired
	}

	//默认值设置
	static defaultProps = {
	  test: '默认值'
	}

	// 在组件即将被挂载到页面的时刻自动执行
	componentWillMount(){
		console.log('componentWillMount');
	}


	render(){
		const {context,test,handlerItemDelete,index} = this.props;
		return(
			<div onClick={ () => {handlerItemDelete(index)} }>{test} - {context}</div>
		)
	}


	// 组件被挂载到页面之后，自动被执行 发送请求一般都放在这
	// 放在componentwillMount会与react-native 有冲突
	componentDidMount(){
		console.log('componentDidMount');
	}

	//组件被更新之前，会被自动执行 true更新组件  false不更新组件
	//nextProps被更新后的值
	//nextState被更新后的值
	shouldCompoentUpdate(nextProps,nextState){
		console.log('shouldCompoentUpdate');
		return true;
	}

	//组件被更新之前，自动执行，但是他在shouldCompoentUpdate之后被执行
	//如果shouldCompoentUpdate返回false则不执行
	componentWillUpdate(){
		console.log('componentWillUpdate');
	}

	//组件被更新到页面之后，自动被执行
	componentDidUpdate(){
		console.log('componentWillUpdate');
	}

	//一个组件要从父组件接收参数
	//只要父组件的render函数重新被执行，子组件的这个生命周期函数就会被执行
	//如果这个组件第一次存在于父组件中，不会执行
	//如果这个组件之前已经存在于父组件中，才会执行
	componentWillReceiveProps(){
		console.log('componentWillReceiveProps');
	}

	//当这个组件即将被从页面中剔除的时候，会被执行
	componentWillUnmount(){
		console.log('componentWillUnmount');
	}

	handlerDivClick = () =>{
		//解构赋值
		const {handlerItemDelete,index}=this.props;
		handlerItemDelete(index);
	};

}
	//参数验证格式(此方式写在类的外侧)
	// Item.propTypes = {
	// 	context: PropTypes.string,
	// 	handlerItemDelete: PropTypes.func,
	// 	index: PropTypes.number
	// }
